feat: add ShopifyProvider to skeleton for locale-aware Money formatting#3722
Draft
fredericoo wants to merge 4 commits intomainfrom
Draft
feat: add ShopifyProvider to skeleton for locale-aware Money formatting#3722fredericoo wants to merge 4 commits intomainfrom
fredericoo wants to merge 4 commits intomainfrom
Conversation
…ting The Money component (re-exported from @shopify/hydrogen-react) depends on ShopifyProvider context for correct locale formatting via Intl.NumberFormat. Without it, all monetary values default to en-US regardless of the store's configured locale. This commit: - Re-exports ShopifyProvider, useShop, and SFAPI_VERSION from @Shopify/hydrogen - Adds readonly apiVersion to the Storefront object for clean server-to-client data flow - Wraps the skeleton App component with ShopifyProvider, fed by storefront.i18n - Fixes the hardcoded <html lang="en"> to use the configured language Fixes #3432 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Oxygen deployed a preview of your
Learn more about Hydrogen's GitHub integration. |
fredericoo
changed the title
The ShopifyProvider wrapping in root.tsx changed the import line, loader return, and JSX nesting structure. All 8 recipe patches targeting root.tsx needed regeneration via three-way merge against the updated skeleton. Affected recipes: b2b, express, gtm, legacy-customer-account-flow, markets, metaobjects, multipass, partytown. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ShopifyProvider validates that storeDomain and storefrontToken are
truthy. In mock.shop dev environments, these env vars are not set
(only SESSION_SECRET is), causing the dev server to throw a 500.
Providing fallbacks ('mock.shop' and 'mock') prevents the error
while keeping the provider functional for real Shopify stores.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…pectations
The legacy-customer-account-flow recipe patch had a duplicated
`{headers}, );` block from the three-way merge, producing a syntax
error when applied. Removed the duplicate.
The markets E2E test expected prices formatted as en-US (`CA$1,121.00`)
because the old skeleton lacked ShopifyProvider. Now that ShopifyProvider
correctly passes the store's i18n data, the Money component formats
using the actual locale — fr-CA in this case (`1 121,00 $`). Updated
CURRENCY_FORMATS to distinguish CAD_EN from CAD_FR and pointed the
FR-CA locale tests at the correct format.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
Fixes #3432
Moneyfrom@shopify/hydrogenis a re-export of@shopify/hydrogen-react'sMoney, which depends onShopifyProvidercontext for correct locale formatting viaIntl.NumberFormat. WithoutShopifyProviderin the tree,useShop()returns a hardcoded default context (countryIsoCode: 'US',languageIsoCode: 'EN'), causing all monetary values to format asen-USregardless of the store's configured locale.WHAT is this pull request doing?
@shopify/hydrogenpackage:ShopifyProvider,useShop, andSFAPI_VERSIONfrom@shopify/hydrogen-reactso these can be imported without reaching into@shopify/hydrogen-reactdirectlyreadonly apiVersionto theStorefrontobject returned bycreateStorefrontClient, giving loaders access to the resolved Storefront API versionSkeleton template:
Appcomponent withShopifyProvider, fed bystorefront.i18nfrom the root loader<html lang="en">to dynamically use the configured languageHOW to test your changes?
i18ninapp/lib/context.tswith a non-US locale (e.g.,{language: 'FR', country: 'FR'})Moneycomponent on any route1 234,56 €for French) instead of always formatting asen-USChecklist
🤖 Generated with Claude Code